body{
    background-color: #333335;
}
.stack{
    display: grid;
    grid-template-areas: "stack";
    width: 12rem;
    height: 12rem;
    margin: 100px auto;
}
.stack > img {
    width: 100%;
    aspect-ratio: 1; /* rogne l'image */
    grid-area: stack;
    object-fit: cover;
    box-shadow: 0 0 0.5rem rgb(0 0 0 / .2);
    border: solid 0.5rem white;
    border-bottom:  solid 2rem white;
    border-radius: 0.5rem;
    transition: transform 200ms;
}
.stack > img:nth-child(1){
    transform: rotate(5deg)
    translateX(1.25rem)
    translateY(-1.25rem);
}
.stack > img:nth-child(2){
    transform: rotate(-10deg)
    translateX(-1.25rem);
}
.stack > img:nth-child(3){
    transform: rotate(0deg)
}

/* hover effect */
.stack > img:hover{
    z-index:1;
    cursor: pointer;
}
.stack:hover > img:nth-child(1){
    transform: rotate(10deg)
    translateX(5.5rem)
    translateY(-2.5rem);
}
.stack:hover > img:nth-child(2){
    transform: rotate(-20deg)
    translateX(-5.75rem);
}
.stack:hover > img:nth-child(3){
    transform: rotate(0deg);
}